  <!-- 3D地图工具包 -->
<template>
  <div class="tools-threed">
    <div class="btn-group-tools">
        <!-- 平台管理 -->
        <el-tooltip v-if="bsConfig.PlatManage.show" class="item" effect="dark" content="平台管理">
            <el-button type="primary" icon="iconfont fontSize30 iconfuwuqi-fill" circle @click="$Ctl.enterDetail('PlatformManage')"></el-button>
        </el-tooltip>
        <!-- 水平距离 -->
        <el-tooltip class="item" effect="dark" content="水平距离">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_celiangjuli" circle @click="$Cs.tooltype3d(1)"></el-button>
        </el-tooltip>
        <!-- 量高 -->
        <el-tooltip class="item" effect="dark" content="量高">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_celianggaodu" circle @click="$Cs.tooltype3d(2)"></el-button>
        </el-tooltip>
        <!-- 测量面积 -->
        <el-tooltip class="item" effect="dark" content="测量面积">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_celiangmianji" circle @click="$Cs.tooltype3d(3)"></el-button>
        </el-tooltip>
        <!-- 清除 -->
        <el-tooltip class="item" effect="dark" content="清除标记">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_qingchucehuishuju" circle @click="$Cs.tooltype3d(4)"></el-button>
        </el-tooltip>
        <!-- 飞往地球表面 -->
        <el-tooltip class="item" effect="dark" content="飞往地球表面">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_feiwangdiqiubiaomian" circle @click="$Cs.tooltype3d(5)"></el-button>
        </el-tooltip>
        <!-- 飞往三维建筑 -->
        <el-tooltip class="item" effect="dark" content="飞往三维建筑">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_feiwangsanweijianzhu" circle @click="$Cs.tooltype3d(6)"></el-button>
        </el-tooltip>
        <!-- 选择 -->
        <el-tooltip class="item" effect="dark" content="选择">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_xuanze" circle @click="$Cs.tooltype3d(7)"></el-button>
        </el-tooltip>
        <!-- 漫游 -->
        <el-tooltip class="item" effect="dark" content="漫游">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_manyou" circle @click="$Cs.tooltype3d(8)"></el-button>
        </el-tooltip>
        <!-- 漫游选择 -->
        <el-tooltip class="item" effect="dark" content="漫游选择">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_manyouxuanze" circle @click="$Cs.tooltype3d(9)"></el-button>
        </el-tooltip>
        <!-- 截图 -->
        <el-tooltip class="item" effect="dark" content="截图">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_jietu" circle @click="$Cs.tooltype3d(10)"></el-button>
        </el-tooltip>
        <!-- 拷贝三维坐标 -->
        <el-tooltip class="item" effect="dark" content="拷贝三维坐标">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_kaobeisanweizuobiao" circle @click="$Cs.tooltype3d(11)"></el-button>
        </el-tooltip>
        <!-- 切换到百度 -->
        <el-tooltip v-show="bsConfig.MapOptions.baidMapAttr.show" class="item" effect="dark" content="切换到二维地图">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_qiehuandaobaiduditu" circle  @click="$Ctl.switchMapType(1)"></el-button>
        </el-tooltip>
        <!-- 查找周边 -->
        <el-tooltip class="item" effect="dark" content="查找周边" >
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_chazhaozhoubian" circle @click="$Cs.tooltype3d(18)"></el-button>
        </el-tooltip>
        <!-- 加载飞行数据 -->
        <el-tooltip v-show="showNavigation" class="item display-inline" effect="dark" content="加载飞行数据">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_jiazaifeihangshuju" circle @click="startFly(1),$Cs.tooltype3d(12)"></el-button>
        </el-tooltip>
        <el-button-group v-show="!showNavigation">
            <el-tooltip class="item display-inline" effect="dark" content="关闭飞行">
                <el-button class="selected" type="primary" icon="iconfont fontSize30 icongongjuxiang_jiazaifeihangshuju" circle @click="startFly(0),$Cs.tooltype3d(15)"></el-button>
            </el-tooltip>
            <el-tooltip class="item display-inline" effect="dark" content="减速">
                <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_jiansu" circle @click="$Cs.tooltype3d(13)"></el-button>
            </el-tooltip>
            <el-tooltip class="item display-inline" effect="dark" :content="flagStartOrSuspend?'开始':'暂停'">
                <el-button type="primary" :icon="'iconfont fontSize30 '+ (flagStartOrSuspend?'icongongjuxiang_kaishifeihang':'icongongjuxiang_zanting')" circle @click="flagStartOrSuspend=!flagStartOrSuspend,$Cs.tooltype3d(14)"></el-button>
            </el-tooltip>
            <el-tooltip class="item display-inline" effect="dark" content="停止">
                <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_tingzhi" circle @click="$Cs.tooltype3d(15)"></el-button>
            </el-tooltip>
            <el-tooltip class="item display-inline" effect="dark" content="加速">
                <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_jiasu" circle @click="$Cs.tooltype3d(16)"></el-button>
            </el-tooltip>
        </el-button-group>
    </div>
  </div>
</template>
<script>

export default {
    props: {
        parames: {
            default () {
                return {}
            }
        }
    },
    data () {
        return {
            showNavigation:true,
            flagStartOrSuspend:true
        }
    },
    created () {
        let that = this
        //TODO 获取缓存的地图配置
    },
    methods: {
       startFly(status){
           this.showNavigation = status?false:true
       },
    }
}
</script>

<style lang="scss" scoped>
.tools-threed{
    padding: 10px;
    button{
        color: #89E2FF;
        width:58px;
        height:58px;
        margin: 11px;
        background:rgba(51,114,212,0.3);
        border:2px solid rgba(51,114,212,1);
        border-radius:8px;
        &.selected{
            color: #90F1FF;
            background: rgba(144,241,255,0.3);
            border: 2px solid rgba(144,241,255,1)
        }
        &.display-inline{
            display: block;
        }
    }
    .el-button-group .el-button--primary:not(:first-child):not(:last-child),
    .el-button-group>.el-button:last-child{
        border: none;
    }
}
</style>
